<template>
  <div style="margin: 10px">
    <el-row style="height: 180px">

      <el-col span="12">
        <el-card>
          <div style="font-size: 14px;">
            <el-row>
              <el-button type="text" @click="dialogFormVisible = true" size="mini">
                <el-button size="small" type="primary">添加类别</el-button>
              </el-button>

              <el-dialog title="新增" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item
                      label="名称："
                      :rules="[
                                { required: true, message: '名称不能为空'}
                              ]"
                      style="margin-left: 100px" size="mini"
                  >
                    <el-input v-model="input" placeholder="请输入名称" style="width: 650px"></el-input>
                    </el-form-item>
                  <el-form-item
                      label="编号："
                      :rules="[
                                { required: true, message: '编号不能为空'},
                               ]"
                      style="margin-left: 100px" size="mini"
                  >
                    <el-input v-model="input" placeholder="请输入编号" style="width: 650px"></el-input>
                  </el-form-item>
                  <el-form-item label="上级目录" :label-width="formLabelWidth" style="margin-left: 100px">

                    <el-select v-model="form.region" placeholder="请选择上级目录" size="mini" style="width: 650px" >
                    </el-select>

                  </el-form-item>
                  <el-form-item label="排序：" :label-width="formLabelWidth" style="margin-left: 100px">

                      <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>

                  </el-form-item>

                    <el-form-item label="活动形式" style="margin-left: 100px">

                      <el-input type="textarea" v-model="form.desc" placeholder="请输入备注" style="width: 650px"></el-input>
                    </el-form-item>
                </el-form>

                <el-divider></el-divider>
               <div style="width: 960px;margin: 0;">
                <div slot="footer" class="dialog-footer" style="margin-left: 750px;">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
               </div>
              </el-dialog>
<!--              <el-button size="small" type="primary">添加类别</el-button>-->
              <el-button size="small">批量删除</el-button>
              <el-button size="small">
                <i class="el-icon-refresh-right"></i>
                刷新
              </el-button>

            </el-row>

              <div style="width: 95%;height: 35px;border: 1px solid #91d5ff;border-radius: 5px;
                     background-color: #e6f7ff;padding-left: 20px">
                <i class="el-icon-warning" style="color: #1890ff;line-height: 35px"></i>
                <span style="line-height: 35px;font-size: 14px;margin-left: 5px">当前选择</span>
              </div>
            <div style="margin-top: 25px;border-top: 1px solid #EBEEE5">
              <el-select v-model="value" placeholder="树操作"  style="margin-top: 10px;height: 30px;width: 100px;line-height: 14px">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col span="12">
        <el-card style="height: 190px;margin-left: 10px">
          <el-empty image-size="20">请先选择一个类别</el-empty>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MerchandiseCategories",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '父子关联'
      }, {
        value: '选项2',
        label: '取消关联'
      }, {
        value: '选项3',
        label: '全部勾选'
      }, {
        value: '选项4',
        label: '取消全选'
      }, {
        value: '选项5',
        label: '展开所有'
      }, {
        value: '选项5',
        label: '合并所有'
      }],
      value: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      num: 0
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped>

</style>